<template>
  <div class="flex-shrink-0">
    <n-collapse-transition :show="showControls">
      <n-space :vertical="true" class="mb-4">
        <!-- 横向滚动控制卡片 -->
        <n-card size="small" class="scroll-control-card">
          <n-space justify="space-between" align="center">
            <n-space align="center">
              <n-tag type="info" size="small">
                <template #icon>
                  <n-icon><ArrowsHorizontalIcon /></n-icon>
                </template>
                横向滚动控制
              </n-tag>
              <n-button size="small" @click="scrollToLeft" type="tertiary">
                <template #icon><n-icon><ArrowLeftIcon /></n-icon></template>
                最左
              </n-button>
              <n-button size="small" @click="scrollToCenter" type="tertiary">
                <template #icon><n-icon><LayoutAlignMiddleIcon /></n-icon></template>
                居中
              </n-button>
              <n-button size="small" @click="scrollToRight" type="tertiary">
                <template #icon><n-icon><ArrowRightIcon /></n-icon></template>
                最右
              </n-button>
            </n-space>
            <n-space align="center">
              <n-slider
                :value="scrollPosition"
                :min="0"
                :max="100"
                :step="1"
                style="width: 200px"
                @update:value="handleScrollSlider"
                :tooltip="false"
              />
              <n-tag size="small" type="default">{{ scrollPosition }}%</n-tag>
            </n-space>
          </n-space>
        </n-card>

        <n-card size="small">
          <n-space align="center" :wrap="true" :size="[24, 12]">
            <n-space align="center" :wrap-item="false" :size="6">
              <n-text>性别:</n-text>
              <n-select
                :value="filters.genderType"
                :options="filterOptions.genderType"
                placeholder="全部"
                clearable
                style="width: 100px"
                @update:value="(value) => updateFilter('genderType', value)"
              />
            </n-space>

            <n-space align="center" :wrap-item="false" :size="6">
              <n-text>班级:</n-text>
              <n-select
                :value="filters.studentClass"
                :options="filterOptions.studentClass"
                placeholder="全部"
                clearable
                style="width: 180px"
                @update:value="(value) => updateFilter('studentClass', value)"
              />
            </n-space>

            <n-space align="center" :wrap-item="false" :size="6">
              <n-text>专业:</n-text>
              <n-select
                :value="filters.majorField"
                :options="filterOptions.majorField"
                placeholder="全部"
                clearable
                style="width: 150px"
                @update:value="(value) => updateFilter('majorField', value)"
              />
            </n-space>
            
            <n-space align="center" :wrap-item="false" :size="6">
              <n-text>学历层次:</n-text>
              <n-select
                :value="filters.educationLevel"
                :options="filterOptions.educationLevel || []"
                placeholder="全部"
                clearable
                style="width: 120px"
                @update:value="(value) => updateFilter('educationLevel', value)"
              />
            </n-space>
            
            <n-space align="center" :wrap-item="false" :size="6">
              <n-text>政治面貌:</n-text>
              <n-select
                :value="filters.politicalStatus"
                :options="filterOptions.politicalStatus"
                placeholder="全部"
                clearable
                style="width: 140px"
                @update:value="(value) => updateFilter('politicalStatus', value)"
              />
            </n-space>

            <n-space align="center" :wrap-item="false" :size="6">
              <n-text>学籍:</n-text>
              <n-select
                :value="filters.enrollmentStatus"
                :options="filterOptions.enrollmentStatus"
                placeholder="全部"
                clearable
                style="width: 120px"
                @update:value="(value) => updateFilter('enrollmentStatus', value)"
              />
            </n-space>

            <n-space align="center" :wrap-item="false">
                <n-button @click="handleSortClick" type="primary" ghost>
                  <template #icon>
                    <n-icon><component :is="sortIcon" /></n-icon>
                  </template>
                  {{ sortButtonText }}
                </n-button>
                
                <n-button @click="clearAllFilters" type="warning" ghost>
                  <template #icon><n-icon><FilterOffIcon /></n-icon></template>
                  清除筛选
                </n-button>
            </n-space>
          </n-space>
        </n-card>

        <!-- 搜索和操作控制区域 -->
        <n-card size="small">
          <n-space justify="space-between" align="center">
            <n-space align="center">
              <n-input
                :value="searchQuery"
                placeholder="按姓名、学号、手机号搜索"
                clearable
                style="width: 280px"
                @update:value="handleSearchChange"
              >
                <template #prefix><n-icon><SearchIcon /></n-icon></template>
              </n-input>
              
              <!-- 新增党员按钮 -->
              <n-button @click="showAddModal = true" type="primary" size="medium">
                <template #icon><n-icon><PlusIcon /></n-icon></template>
                新增党员
              </n-button>
              <!-- 批量导入按钮 -->
              <n-button @click="showBatchImportModal = true" type="success" size="medium">
                <template #icon><n-icon><FileUploadIcon /></n-icon></template>
                批量导入信息
              </n-button>
            </n-space>

            <n-popover trigger="click" placement="bottom-end">
              <template #trigger>
                <n-button type="primary" size="medium">
                  <template #icon><n-icon><ColumnsIcon /></n-icon></template>
                  筛选列 ({{ visibleColumns.length }}/{{ baseColumns.length }})
                </n-button>
              </template>
              <div style="max-height: 400px; overflow-y: auto; width: 220px;">
                <n-checkbox-group :value="visibleColumns" @update:value="handleVisibleColumnsChange">
                  <n-space vertical>
                    <n-checkbox
                      v-for="col in baseColumns"
                      :key="col.key"
                      :value="col.key"
                      :label="col.title"
                    />
                  </n-space>
                </n-checkbox-group>
              </div>
            </n-popover>
          </n-space>
        </n-card>
      </n-space>
    </n-collapse-transition>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import {
  NSpace, NCard, NTag, NIcon, NButton, NSelect, NText, NSlider,
  NCollapseTransition, NInput, NPopover, NCheckboxGroup, NCheckbox
} from 'naive-ui'
import {
  ArrowsHorizontal as ArrowsHorizontalIcon,
  ArrowLeft as ArrowLeftIcon,
  ArrowRight as ArrowRightIcon,
  LayoutAlignMiddle as LayoutAlignMiddleIcon,
  Search as SearchIcon,
  X as FilterOffIcon,
  ArrowsSort as SortIcon,
  Columns as ColumnsIcon,
  Plus as PlusIcon,
  FileUpload as FileUploadIcon,
  ChevronUp as ChevronUpIcon,
  ChevronDown as ChevronDownIcon
} from '@vicons/tabler'

const props = defineProps({
  showControls: {
    type: Boolean,
    default: true
  },
  scrollPosition: {
    type: Number,
    default: 0
  },
  filters: {
    type: Object,
    default: () => ({})
  },
  filterOptions: {
    type: Object,
    default: () => ({})
  },
  searchQuery: {
    type: String,
    default: ''
  },
  sortState: {
    type: String,
    default: 'default'
  },
  visibleColumns: {
    type: Array,
    default: () => []
  },
  baseColumns: {
    type: Array,
    default: () => []
  },
  showAddModal: {
    type: Boolean,
    default: false
  },
  showBatchImportModal: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits([
  'update:scrollPosition',
  'update:filters',
  'update:searchQuery',
  'update:visibleColumns',
  'scrollToLeft',
  'scrollToRight',
  'scrollToCenter',
  'handleScrollSlider',
  'handleFilterChange',
  'handleSearchChange',
  'handleSortClick',
  'clearAllFilters',
  'update:showAddModal',
  'update:showBatchImportModal'
])

// 排序按钮展示
const sortButtonText = computed(() => {
  switch (props.sortState) {
    case 'asc':
      return '学号升序';
    case 'desc':
      return '学号降序';
    default:
      return '默认排序';
  }
});

const sortIcon = computed(() => {
  switch (props.sortState) {
    case 'asc':
      return ChevronUpIcon;
    case 'desc':
      return ChevronDownIcon;
    default:
      return SortIcon;
  }
});

// 方法
const scrollToLeft = () => {
  emit('scrollToLeft')
}

const scrollToRight = () => {
  emit('scrollToRight')
}

const scrollToCenter = () => {
  emit('scrollToCenter')
}

const handleScrollSlider = (value) => {
  emit('handleScrollSlider', value)
}

const handleFilterChange = () => {
  emit('handleFilterChange')
}

const handleSearchChange = (value) => {
  emit('handleSearchChange', value)
}

const handleSortClick = () => {
  emit('handleSortClick')
}

const clearAllFilters = () => {
  emit('clearAllFilters')
}

const updateFilter = (key, value) => {
  emit('update:filters', { ...props.filters, [key]: value })
}

const handleVisibleColumnsChange = (value) => {
  emit('update:visibleColumns', value)
}

// 模态框控制
const showAddModal = computed({
  get: () => props.showAddModal,
  set: (value) => emit('update:showAddModal', value)
})

const showBatchImportModal = computed({
  get: () => props.showBatchImportModal,
  set: (value) => emit('update:showBatchImportModal', value)
})
</script>

<style scoped>
.scroll-control-card {
  border: 1px solid #e0e0e6;
}

.n-button--tertiary {
  background-color: transparent;
}

.n-button--tertiary:hover {
  background-color: #f6f6f7;
}
</style>